<template>
	<view>
		<scroll-view class="scroll" scroll-y="true">
			<view class="title">请认真填写以下信息</view>
			<u-form :model="form" ref="uForm" label-width="140">
				<view class="box">
					<view class="box-title">访客基本信息</view>
					<u-form-item label="姓名" prop="visitor" required>
						<u-input v-model="form.visitor" placeholder="请输入你的真实姓名" />
					</u-form-item>
					<u-form-item label="手机" prop="vphone" required>
						<u-input v-model="form.vphone" placeholder="请输入你的手机号码" />
					</u-form-item>
					<u-form-item label="性别" prop="sex" required>
						<u-radio-group v-model="form.sex">
							<u-radio v-for="(item, index) in sexList" :key="index" :name="item.value">
								{{ item.label }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="身份证" prop="idCard" required>
						<u-input v-model="form.idCard" placeholder="请输入你的身份证号" />
					</u-form-item>
					<u-form-item label="身份证照片" prop="idCardImg" label-width="150" required>
						<u-upload ref="idCardImgUpload" name="file" :action="baseUrl+'/visitlog/UploadIdCardImg'" :file-list="idCardImgList" max-count="1" :show-progress="false" image-mode="widthFix" @on-success="idCardImgOnSuccess" @on-remove="idCardImgOnRemove"></u-upload>
					</u-form-item>
					<u-form-item label="人脸自拍" prop="vimg" label-width="150" required>
						<u-upload ref="vimgUpload" name="file" :action="baseUrl+'/visitlog/uploadvimg'" :file-list="vimgList" max-count="1" :show-progress="false" image-mode="widthFix" @on-success="onSuccess" @on-remove="onRemove"></u-upload>
					</u-form-item>
				</view>
			</u-form>
		</scroll-view>
		<u-row gutter="32" class="foot">
			<!-- <u-col span="6">
				<u-button type="error" :disabled="form.status==-1 || form.status==20 || form.status==50?false:true" @click="clear">重置</u-button>
			</u-col> -->
			<u-col span="12">
				<u-button type="primary" :disabled="form.status==50 || isExist?true:false" @click="submit">提交</u-button>
			</u-col>
		</u-row>
		<view style="height: 51rpx;"></view>
		<u-modal v-model="showMsg" :title="title" :content="content" @confirm="confirmMsg"></u-modal>
		<view v-if="form.status==50" class="top-msg green">此次来访已结束</view>
		<view v-if="isExist" class="top-msg green">存在未结束来访</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				canShare: true,
				isExist: false,
				baseUrl: '',
				idCardImgList: [], // 身份证照片列表
				vimgList: [],  // 头像列表
				showMsg:false,
				content:'',
				title:'',
				form: {
					visitor: '',
					vphone: '',
					sex: '',
					idCard: '',
					idCardImg: '',
					vimg: '',
				},
				sexList: [
					{
						value: '1',
						label: '男'
					},
					{
						value: '2',
						label: '女'
					}
				],
				rules: {
					visitor: [
						{ 
							required: true, 
							message: '请输入', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					vphone: [
						{
							required: true, 
							message: '请输入',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								// 返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change','blur'],
						}
					],
					sex: [
						{ 
							required: true, 
							message: '请选择', 
							trigger: ['change','blur'],
							type: 'any'
						}
					],
					idCard: [
						{
							required: true, 
							message: '请输入',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.idCard(value);
							},
							message: '身份证号不正确',
							trigger: ['change','blur'],
						}
					],
					idCardImg: [
						{ 
							required: true, 
							message: '请输入', 
							trigger: ['change','blur'],
						}
					],
					vimg: [
						{ 
							required: true, 
							message: '请上传', 
							trigger: ['change','blur'],
						}
					]
				}
			}
		},
		mounted() {
			if(this.form.vnum == 1 || !this.canShare) {
				return this.$u.toast('分享人数已达上限')
			}
		},
		onLoad(options) {
			this.baseUrl = this.$u.http.config.baseUrl
			const id = options.id
			this.getOneById(id)
			
			this.existNum(id)
		},
		methods: {
			existNum(id) {
				this.$u.get('/visitlog/getexistshare/'+id).then(res => {
					if(res.code==200){
						if(res.result) {
							const num = res.result.vnum - res.result.count - 1
							if(num>0) {
								this.canShare = true
							}else{
								this.canShare = false
							}
						}else{
							this.canShare = true
						}
					}else{
						this.$u.toast(res.message)
						this.canShare = false
					}
				}).catch(err => {
					this.$u.toast(err)
					this.canShare = false
				})
			},
			idCardImgOnRemove() {
				this.$refs.idCardImgUpload.clear()
				this.form.idCardImg = ''
			},
			idCardImgOnSuccess(event) {
				if(event.code==200) {
					this.form.idCardImg = event.result.url
				}
			},
			onRemove() {
				this.$refs.vimgUpload.clear()
				this.form.vimg = ''
			},
			onSuccess(event) {
				if(event.code==200) {
					this.form.vimg = event.result.url
				}
			},
			getOneById(id) {
				this.$u.get('/visitlog/detail',{
					id:id
				}).then(res => {
					if(res.code==200){
						this.form = {...res.result,visitor:'',vphone:'',sex:'',idCard:'',vimg:''}
						this.getOne()
					}else{
						this.$u.toast(res.message)
					}
				}).catch(err => {
					this.$u.toast(err)
				})
			},
			getOne() {
				if(this.form.status==50){
					return this.$u.toast('已结束')
				}
				this.idCardImgList = []
				this.vimgList = []
				const phone = uni.getStorageSync('share_vphone_key')
				if(phone){
					this.$u.get('/visitlog/getvisit',{
						type:this.form.type,
						vphone:phone
					}).then(res => {
						if(res.code==200){
							const obj = res.result
							this.form = {
								...this.form,
								visitor: obj.visitor,
								vphone: obj.vphone,
								sex: obj.sex,
								idCard: obj.idCard,
								idCardImg: obj.idCardImg,
								vimg: obj.vimg
							}
							if(this.form.idCardImg) {
								this.idCardImgList.push({ url: this.form.idCardImg })
							}
							if(this.form.vimg) {
								this.vimgList.push({ url: this.form.vimg })
							}
							if(obj.isBeShared) {
								if(obj.isBeShared === this.form.id) {
									uni.redirectTo({
										url: '/pages/my/askCode?content='+obj.id+','+obj.status+','+obj.type+','+this.form.id
									})
								}else{
									if(obj.status!=50){
										this.isExist = true
									}
								}
							}else {
								if(obj.status!=50) {
									this.isExist = true
									// if(obj.type==1){
									// 	uni.redirectTo({
									// 		url: '/pages/info/visitor'
									// 	})
									// }
									// if(obj.type==2){
									// 	uni.redirectTo({
									// 		url: '/pages/info/driver'
									// 	})
									// }
									// if(obj.type==3){
									// 	uni.redirectTo({
									// 		url: '/pages/info/build'
									// 	})
									// }
								}
							}
						}else{
							this.$u.toast(res.message)
						}
					}).catch(err => {
						this.$u.toast(err)
					})
				}
			},
			confirmMsg() {
				this.showMsg = false
				if(this.title == '提交成功'){
					this.getOne()
				}
			},
			submit() {
				if(this.form.vnum == 1 || !this.canShare) {
					return this.$u.toast('分享人数已达上限')
				}
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$u.post('/visitLogExtend/add',{...this.form,status:10}).then(res => {
							uni.setStorageSync('share_vphone_key', this.form.vphone)
							if(res.code==200){
								this.showMsg = true
								this.title = '提交成功'
								this.content = '请等待审核 稍后可再次到此页面查询结果'
							}else{
								this.showMsg = true
								this.title = '提交失败'
								this.content = res.message
							}
						}).catch(err => {
							this.showMsg = true
							this.title = '提交失败'
							this.content = err
						})
					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style scoped>
	.title {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		padding: 67rpx 0 10rpx 40rpx;
	}
	
	.box {
		width: 690rpx;
		background: #fff;
		margin: auto;
		margin-top: 30rpx;
		padding: 0 23rpx;
		border-radius: 12rpx;
	}
	
	.box-title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		padding-top: 48rpx;
	}
	
	.btn {
		width: 690rpx;
		background: #1976D2;
		color: #fff;
		margin-top: 66rpx;
	}
	
	.top-msg {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: var(--window-top);
		width: 100%;
		height: 88rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		z-index: 999;
	}
	.top-msg.green {
		background: #19BE6B;
	}
	.top-msg.red {
		background: #FA3534;
	}
	
	.scroll {
		height: calc(100vh - var(--window-top) - var(--window-bottom) - 142rpx);
		width: 100%;
	}
	
	.foot {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 112rpx;
		border-top: 1rpx solid #F5F5F5;
		background: #fff;
	}
	
</style>
